<template>
	<view class="wui-noticeBar" :style="[backgroundComputed, heightComputed,colorComputed]">
		<view class="left-icon iconfont " :style="[heightComputed]" :class="[leftIcon]"></view>
		<view class="noticeBar-content">
			<view class="noticeBar-content-text" :style="[translateXComputed]">
				<text>{{ content }}</text>
			</view>
		</view>
		<view class="right-icon iconfont " :style="[heightComputed]" :class="[rightIcon]"></view>
	</view>
</template>

<script>
	export default {
		name: 'w-noticeBar',
		props: {
			content: {
				type: String,
				default: ''
			},
			leftIcon: {
				type: String,
				default: 'icon-wui-notice'
			},
			rightIcon: {
				type: String,
				default: 'icon-wui-right'
			},
			height: {
				type: [String, Number],
				default: 80
			},
			speed: {
				type: [String, Number],
				default: 13
			},
			background: {
				type: String,
				default: '#fff'
			},
			color: {
				type: String,
				default: '#333'
			},
			playStatus: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				playStatus__: this.playStatus,
				translateX: 0,
				contentWrapWidth: 0,
				contentTextWidth: 0,
				timerInterval: null
			};
		},
		watch: {
			translateX(val) {
				if (val + this.contentTextWidth < 0) {
					this.translateX = this.contentWrapWidth;
				}
			},
			playStatus(val) {
				this.playStatus__ = val
			},
			playStatus__: {
				handler(val) {
					if (val) {
						this.play()
					} else {
						this.stop()
					}
				},
				immediate: true
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.selectorQuery('.noticeBar-content', data => {
					this.translateX = data.width;
					this.contentWrapWidth = data.width;
					this.selectorQuery('.noticeBar-content-text', data => {
						this.contentTextWidth = data.width;
						this.playStatus__ = true
					});
				});
			});
		},
		computed: {
			translateXComputed() {
				return {
					'--translate-x': `translateX(${this.translateX}px)`
				};
			},
			backgroundComputed() {
				return {
					'--background': this.background
				};
			},
			heightComputed() {
				return {
					'--height': uni.upx2px(this.height) + 'px'
				};
			},
			colorComputed() {
				return {
					'--color': this.color
				};
			}
		},
		methods: {
			stop() {
				if (this.timerInterval !== null) {
					clearInterval(this.timerInterval);
					this.timerInterval = null;
				}
			},
			play() {
				this.timerInterval = setInterval(() => {
					this.translateX--;
				}, Number(this.speed));
			},
			// 元素选择
			selectorQuery(dom, callback = () => {}) {
				const query = uni.createSelectorQuery().in(this);
				query
					.select(dom)
					.boundingClientRect(data => {
						callback(data);
					})
					.exec();
			}
		}
	};
</script>

<style lang="scss" scoped>
	.wui-noticeBar {
		display: flex;
		align-items: center;
		height: var(--height);
		background-color: var(--background);
		color: var(--color);

		.noticeBar-content {
			flex: 1;
			position: relative;
			overflow: hidden;
			height: 100%;
			display: flex;
			align-items: center;

			.noticeBar-content-text {
				white-space: nowrap;
				transform: var(--translate-x);
			}
		}

		.iconfont {
			font-size: 32rpx;
			width: var(--height);
			height: var(--height);
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
